/*
 * @Author: wangzhongjie
 * @Date: 2020-01-08 09:25:19
 * @LastEditors: wangzhongjie
 * @LastEditTime: 2020-03-11 10:45:47
 * @Description:菜单
 * @Email: UvDream@163.com
 */
import React, { useContext, useState } from "react";
import { Menu, Icon } from "antd";
import { MenusContext } from "../store/menus";
// import { Link } from "react-router-dom";
const { SubMenu } = Menu;
function Menus(props) {
  const routes = {
    "/index/dashboard": ["1"],
    "/index/addArticle": ["2-1"],
    "/index/articleList": ["2-2"],
    "/index/articleTypes": ["2-3"],
    "/index/imagesList": ["2-4"],
    "/index/addGithub": ["3-1"],
    "/index/github": ["3-2"]
  };
  const openMenu = {
    "/index/dashboard": ["1"],
    "/index/addArticle": ["2"],
    "/index/articleList": ["2"],
    "/index/articleTypes": ["2"],
    "/index/imagesList": ["2"],
    "/index/addGithub": ["3"],
    "/index/github": ["3"]
  };
  const { dispatch } = useContext(MenusContext);
  const [selectMenus] = useState(routes[props.history.location.pathname]);
  const [openMenus] = useState(openMenu[props.history.location.pathname]);

  const menusClick = e => {
    if (e.key === "1") {
      props.history.push("/index/dashboard");
    } else if (e.key === "2-1") {
      props.history.push("/index/addArticle");
    } else if (e.key === "2-2") {
      props.history.push("/index/articleList");
    } else if (e.key === "2-3") {
      props.history.push("/index/articleTypes");
    } else if (e.key === "2-4") {
      props.history.push("/index/imagesList");
    } else if (e.key === "3-1") {
      props.history.push("/index/addGithub");
    } else if (e.key === "3-2") {
      props.history.push("/index/github");
    }
    // pc端不关闭菜单
    if (document.body.clientWidth < 992) {
      dispatch({ type: "CLOSED", closed: true });
    }
  };
  return (
    <Menu
      theme="dark"
      mode="inline"
      defaultOpenKeys={openMenus}
      defaultSelectedKeys={selectMenus}
      onClick={menusClick}
    >
      <Menu.Item key="1">
        {/* <Link to="/index/dashboard/"> */}
        <Icon type="bar-chart" style={{ fontSize: "18px" }} />
        <span className="nav-text">首页</span>
        {/* </Link> */}
      </Menu.Item>
      <SubMenu
        key="2"
        title={
          <span>
            <Icon type="folder-open" style={{ fontSize: "18px" }} />
            <span>文章管理</span>
          </span>
        }
      >
        <Menu.Item key="2-1">添加文章</Menu.Item>
        <Menu.Item key="2-2">文章列表</Menu.Item>
        <Menu.Item key="2-3">文章类别</Menu.Item>
        <Menu.Item key="2-4">图片管理</Menu.Item>
      </SubMenu>
      <SubMenu
        key="3"
        title={
          <span>
            <Icon type="github" style={{ fontSize: "18px" }} />
            <span>开源管理</span>
          </span>
        }
      >
        <Menu.Item key="3-1">添加项目</Menu.Item>
        <Menu.Item key="3-2">项目列表</Menu.Item>
      </SubMenu>
    </Menu>
  );
}
export default Menus;
